<script setup>
import { ref, onMounted, reactive, getCurrentInstance } from "vue";
import { mainStore } from "../store/index";
import $fetch from "../utils/request";
const { proxy } = getCurrentInstance();
const { $mapevent } = proxy;
const store = mainStore();
let models = true;
let editViewpoint = ref("");
let datalist = reactive({
    dimingList: [],
    mapLableList: [],
    poiList: [],
});

function ferretAbout() {
    console.log(editViewpoint.value);
    $fetch(
        `/poi/list`,
        { name: editViewpoint.value },
        "post",
        localStorage.getItem("token")
    ).then((res) => {
        if (res.code) {
            // let dimingList = res.data.dimingList
            // let mapLableList = res.data.mapLableList
            // let poiList = res.data.poiList.length
            for (const key in datalist) {
                if (res.data[key].length > 10) {
                    res.data[key].length = 10;
                    datalist[key] = res.data[key];
                } else datalist[key] = res.data[key];
            }
        }
    });
}
function handleClose(){
    store.changeSearchShow(false)
}
</script>
<template>
    <el-dialog
        id="searchFor"
        v-model="models"
        title="搜索"
        draggable
        :close-on-click-modal="false"
        :before-close="handleClose"
    >
        <div style="display: flex; align-items: center">
            <el-input v-model="editViewpoint" placeholder="请选择搜索内容..." />
            <el-button type="primary" @click="ferretAbout()">搜索</el-button>
        </div>

        <div class="aside">
            <div class="tag">
                <div>地名</div>
                <div
                    v-for="isrt in datalist?.dimingList"
                    :key="isrt.gid"
                    @click="$mapevent.f_AddPoi(isrt)"
                >
                    <el-tag style="margin: 4px 0">{{ isrt.name }}</el-tag>
                </div>
            </div>
            <div class="tag">
                <div>标注</div>
                <div
                    v-for="isrt in datalist?.mapLableList"
                    :key="isrt.gid"
                    @click="$mapevent.f_AddPoi(isrt,1)"
                >
                    <el-tag style="margin: 4px 0">{{ isrt.name }}</el-tag>
                </div>
            </div>
            <div class="tag">
                <div>POI</div>
                <div
                    v-for="isrt in datalist?.poiList"
                    :key="isrt.gid"
                    @click="$mapevent.f_AddPoi(isrt)"
                >
                    <el-tag style="margin: 4px 0">{{ isrt.name }}</el-tag>
                </div>
            </div>
        </div>
    </el-dialog>
</template>
<style lang="less">
#searchFor {
    position: fixed;
    z-index: 2;
    width: 350px;
    height: 40%;
    overflow-y: auto;
    top: 0px;
    left: calc((100vw - 300px) / 2);
    pointer-events: auto;
    border: 2px solid #006699;
    background-color: #00669957;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    .el-dialog__headerbtn {
        top: -2px;
    }
    .el-tree-node__content {
        color: #fff;
    }
    .el-tree-node__content:hover {
        background-color: #0066998a;
    }
    .el-dialog__header {
        width: calc(100% - 40px);
        padding: 10px 20px;
        background-color: #0066997c;
        .el-dialog__title {
            color: #fff;
            font-size: 16px;
        }
        .el-icon svg {
            color: #fff;
        }
    }
    .el-dialog__body {
        padding: 10px;
    }
    .el-form-item__label {
        color: #fff;
    }
    .el-dialog__footer {
        padding: 0 10px 10px;
    }
    .aside {
        color: #fff;

        .tag {
            padding: 4px;
        }
    }
}
</style>
